<template>
  <div class="content">
    <span v-if="props.selectInfoList.some(item=>item.data.length)">
      <span>已选择</span>
      <span v-for="item in props.selectInfoList.filter(item=>item.data.length)">
        <span class="num">{{ item?.data?.length }}</span>
        <span>
          {{ `${item.type == 1 ? '张' : '个'}` }}
        </span>
        <span>
          {{ formatName(item.type) }}
          ，
        </span>
      </span>
    </span>
    <span v-else>
      <span>已选择</span>
      <span class="num">0</span>
      <span>
        {{ `${props.baseId == 2 ? '张' : '个'}` }}
      </span>
      <span>
        {{ props.selectNameStr }}
        ，
      </span>
    </span>

    <span>您还可选</span>
    <span class="num">{{ remainNum }}</span>
    <span>个素材</span>
  </div>
</template>

<script setup lang="ts">
  import { reactive, ref, computed } from 'vue'

  const tabs = ref([
    { id: 2, type: '1', name: '图片', nameStr: 'pic'},
    { id: 3, type: '4', name: '音频', nameStr: 'audio'},
    { id: 4, type: '2', name: '视频', nameStr: 'video'},
    { id: 5, type: '5', name: '文件', nameStr: 'file'},
    { id: 6, type: '3', name: '链接', nameStr: 'link'},
    { id: 1, type: '0', name: '文本', nameStr: 'text'},
    { id: 8, type: '6', name: '抽奖', nameStr: 'luck'},
    { id: 27, type: '9', name: '收集表', nameStr: 'collect'},
    { id: 99, type: '7', name: '商品素材 ', nameStr: 'ecommerce'},
    { id: 99, type: '8', name: '页面素材 ', nameStr: 'ecommerce'},
    { id: 15, type: '10', name: '公众号图文', nameStr: 'officialAccounts'},
    { id: 11, type: '11', name: '小程序', nameStr: 'miniProgram'}
  ])

  interface Props {
    baseId: number|string
    selectNameStr: number|string
    totalNum: number
    selectInfoList: any[]
  }
  
  const props = withDefaults(defineProps<Props>(), {
    baseId: 2,
    selectNameStr: '',
    totalNum: 9,
    selectInfoList: []
  })

  const selectNum = computed(()=>{
    return props.selectInfoList.reduce((pre, cur)=>{
      if(!!cur.data.length){
        pre += cur.data.length
      }
      return pre
    }, 0)
  })
  const remainNum = computed(()=>{
    if(props.totalNum > selectNum.value){
      return Number(props.totalNum - selectNum.value)
    }else{
      return 0
    }
  })

  const formatName = (type:number)=>{
    return tabs.value.find(item => item.type == type)?.name
  }


  const emit = defineEmits(['change'])



</script>

<style lang="scss" scoped>
  .content{
    width: 100%;
    // background-color: pink;
    span{
      font-size: 14px;
      font-family: STHeitiSC-Light, STHeitiSC;
      font-weight: 300;
      line-height: 1.4;
      color: #33302d;
    }
    .num{
      color: #ff6b00;
      margin: 0 5px;
    }
  }


</style>
